<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../js/vue.min.js"></script>
</head>
<body>
<div id="a" style="margin-bottom: 200px">
    <h3>阻止冒泡</h3>
    <div style="background-color: red; width: 500px; height: 500px"
        @click="clk2">
        <div style="background-color: green; width: 400px; height: 400px"
            v-on:click.stop="clk1()">
            <div style="background-color: blue; width: 300px; height: 300px;color: #dddddd"
                v-on:click.stop="nums++" @click.right="nums--">
                {{nums}}
            </div>
        </div>
    </div>

    <h3>按键后缀</h3>
    <input @keypress.enter="alert('enter')"><br>
    <input @keypress.13="alert('13')"><br>

    <h3>阻止默认行为</h3>
    <form action="https://baidu.com">
        <button @click="alert('未阻止button的默认提交行为')">提交</button>
        <button @click.prevent="alert('阻止button的默认提交行为')">提交</button>
    </form>
    <iframe name="ff"></iframe>
    <a href="https://taobao.com" target="ff">淘宝</a>
    <a href="https://taobao.com" target="ff" @click.prevent="showEvent($event)">淘宝</a>
</div>
<script>
    var v = new Vue({
        el : "#a",
        data : {
            nums : 0
        },
        methods : {
            clk1(){
                alert("div1");
            },
            clk2(){
                alert("div2");
            },
            showEvent(e){
                console.info(e);
            }
        }

    })
</script>


</body>
</html>